<template>
  <teleport v-if="schema && isActive" to="head">
    <component :is="'script'" type="application/ld+json">
      {{ JSON.stringify(schema) }}
    </component>
  </teleport>
</template>

<script setup>
import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, toValue } from 'vue'

const props = defineProps({
  schema: { type: Object, default: null },
  active: { type: Boolean, default: true },
})

const isActivated = ref(false)
onMounted(() => (isActivated.value = true))
onUnmounted(() => (isActivated.value = false))
onActivated(() => (isActivated.value = true))
onDeactivated(() => (isActivated.value = false))

const isActive = computed(() => [props.active, isActivated].every((v) => toValue(v)))
</script>
